<template>
	<view class="order-goods">
		<view v-for="(item, index) in list" :key="index" class="item-wrap">
			<view class="item package flex bg-white m-t-20" v-if="item.is_container==1">
				<view class="package-info flex-1">
					<view class="goods-name line-2 m-b-20 bold">{{ item.goods_name || item.name }}</view>
				</view>
				<view class="package-image-box">
					<view style="display: flex;">
						<view class="package-image-list"
							v-for="(containerItem, containerIndex) in item.container_item_info" :key="containerIndex">
							<u-image width="105" height="140" :src="containerItem.image" v-if="containerIndex<3"
								style="margin-right: 10rpx;"></u-image>
						</view>
					</view>
					<view>
						<text>共{{ item.container_item_info.length }}种商品</text>
					</view>
				</view>
				<view class="package-price-box">
					<text>组合价：</text>
					<view class="flex-1">
						<price-format :first-size="34" :second-size="26" :subscript-size="26" color="#fa7b63"
							:price="item.goods_price"></price-format>
					</view>
					<text>x{{ item.num || item.goods_num || item.count }}</text>
				</view>
			</view>
			<view class="item flex" v-else @click="jumpGoods(item)">
				<view class="goods-img">
					<u-image width="154rpx" height="206rpx" lazy-load :src="item.image_str || item.image"></u-image>
				</view>
				<view style="display: flex;flex-direction: row;align-items: flex-start;flex: 1;">
					<view class="goods-info">
						<view class="goods-name line-2 m-b-10">
							{{ item.goods_name || item.name }}
						</view>
						<view class="goods-spec muted">{{
			    item.spec_value || item.spec_value_str
			  }}</view>
					</view>
					<view class="price-info">
						<view class="goods-price">
							<view class="primary flex">
								<!-- 非秒杀商品的时候（普通商品和其他商品都是显示的这个 -->
								<price-format v-if="!item.is_seckill" :subscript-size="18" :first-size="28"
									:second-size="28" :price="item.price || item.goods_price" weight="700" />
							</view>
						</view>
						<view class="goods-num muted">x{{ item.num || item.goods_num || item.count }}</view>
					</view>
				</view>
			</view>

			<view class="goods-footer flex" v-if="item.refund_btn">
				<view class="flex-1"></view>
				<router-link :to="{
            path: '/bundle/pages/apply_refund/apply_refund',
            query: {
              id: item.id,
              order_id: item.order_id,
              item_id: item.item_id,
            },
          }">
					<button size="xs" class="plain br16" hover-class="none">
						申请退款
					</button>
				</router-link>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},

		components: {},
		props: {
			list: {
				type: Array,
				default: () => [],
			},
			link: {
				type: Boolean,
				default: false,
			},
			// 是否点击商品跳转
			isJumpGoods: {
				type: Boolean,
				default: false,
			},
		},

		created() {
			setTimeout(() => {
				console.log(this.list);
			}, 700);
		},

		methods: {
			jumpGoods(item) {
				if (!this.isJumpGoods) return;
				this.$Router.push({
					path: "/pages/goods_details/goods_details?id=",
					query: {
						id: item.goods_id,
					},
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.order-goods {
		.item {
			padding: 20rpx 35rpx 0;

			.goods-info {
				flex: 1;
				margin: 0 35rpx;

				.goods-name {
					margin-bottom: 20rpx;
					font-size: 30rpx;
					font-weight: 700;
				}

				.goods-spec {
					font-size: 22rpx;
				}
			}

			.price-info {
				padding-top: 6rpx;
				text-align: right;

				.goods-num {
					font-size: 22rpx;
				}
			}

			.vip-price {
				margin: 0 10rpx;
				background-color: #ffe9ba;
				line-height: 30rpx;
				border-radius: 6rpx;
				overflow: hidden;

				.price-name {
					background-color: #101010;
					padding: 3rpx 10rpx;
					color: #ffd4b7;
					position: relative;
					overflow: hidden;

					&::after {
						content: "";
						display: block;
						width: 20rpx;
						height: 20rpx;
						position: absolute;
						right: -15rpx;
						background-color: #ffe9ba;
						border-radius: 50%;
						top: 50%;
						transform: translateY(-50%);
						box-sizing: border-box;
					}
				}
			}
		}

		.package {
			display: flex;
			flex-direction: column;
			align-items: flex-start;

			.package-info {
				display: flex;

				.goods-info {
					flex: 1;
				}
			}

			.package-image-box {
				display: flex;
				width: 100%;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.package-image-list {
					flex: 1;
					display: flex;
					margin-right: 20rpx;
				}
			}

			.package-price-box {
				display: flex;
				width: 100%;
				margin-top: 4px;
				font-size: 9px;
				color: #605e5d;
				justify-content: space-between;
				align-items: center;
			}
		}

		.goods-footer {
			height: 70rpx;
			align-items: flex-start;
			padding: 0 24rpx;

			.plain {
				border: 1px solid #999;
				height: 52rpx;
				line-height: 52rpx;
				font-size: 26rpx;
			}
		}
	}
</style>